<template>
	<view class="bgcolor">
		<view class="login_title">欢迎登录</view>
		<view class="login_container">
			<view class="login_item">
				<view class="loginIcon">
					<span class="phone-font icon-phone"></span>
				</view>
				<view>
					<input v-model="userInfo.phone" type="tel" maxlength="11" placeholder="请输入手机号"
						placeholder-style="color:#fff" />
				</view>
			</view>
			<view class="login_item">
				<view class="loginIcon">
					<span class="Password_iconfont icon-password"></span>
				</view>
				<view><input v-model="userInfo.password" type="password" maxlength="11" placeholder="请输入密码"
						placeholder-style="color:#fff" /></view>
				<navigator url="/pages/my/loginPass" class="forget-pwd">忘记密码</navigator>
			</view>
			<view class="login_item">
				<view class="loginIcon">
					<span class="yanzma_iconfont icon-yanzhengma"></span>
				</view>
				<view><input v-model="userInfo.code" type="" maxlength="11" placeholder="请输入验证码"
						placeholder-style="color:#fff" /></view>
				<view class="yanz_img" @click="clickImage()">
					<img :src='imgcode'>
				</view>
			</view>
			<view class="login_item">
				<view class="loginIcon">
					<span class="Store_iconfont icon-store"></span>
				</view>
				<view><input v-model="userInfo.storeNumber" type="" maxlength="11" placeholder="请输入店铺号"
						placeholder-style="color:#fff" /></view>
			</view>
			<view class="loginBtn">
				<button type="default" @click="clickLogin">登 录</button>
			</view>

			<view class="login-tips">
				已有账号?
				<text @click='RegisterClick()'>立即注册</text>
			</view>
			<uni-popup ref="popup" type="center" :animation="false">
				<view class="popup_content">
					<input v-model="userInfo.messageCode" type="text" placeholder="请输入手机验证码">
					<button class="login_yzmBtn" @click="clickCode">发送验证码</button>
				</view>

			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getImgCode,
		login
	} from '@/request/api/login.js'

	export default {
		onLoad() {
			this.clickImage()
		},
		name: 'login',
		data() {
			return {
				userInfo: {
					phone: '',
					password: '',
					code: '',
					codeKey: '',
					storeNumber: ''
				},
				imgcode: '',
			}
		},
		methods: {
			RegisterClick() {
				uni.navigateTo({
					url: "/pages/users/register"
				})
			},
			clickImage() {
				getImgCode().then(res => {
					this.imgcode = res.data.img
					this.userInfo.codeKey = res.data.key
				})
			},
			clickCode() {
				const phone = this.userRegister.phone
				getMessageCode({
					phone
				}).then(res => {})
			},
			clickLogin() {
				login(this.userInfo).then(res => {
					if (res.code == 0) {
						uni.setStorageSync("token", res.data.token)
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						this.clickImage()
					}
				})
			}
		}
	}
</script>

<style>
	.bgcolor {
		background-color: #65a1f9;
		height: 100%;
	}

	.login_title {
		color: #fff;
		font-size: 28px;
		font-weight: 700;
		text-align: center;
		padding: 53px 0 26px;
	}

	.login_container {
		margin: 10px 5%;
		display: flex;
		flex-direction: column;
	}

	.login_container .login_item {
		background: #7bb3ff;
		align-items: center;
		margin: 0 16px 16px;
		padding: 0 16px;
		height: 53px;
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.login_container .login_item input {
		margin-left: 10px;
		font-size: 14px;
		color: #fff;
	}

	input::-webkit-input-placeholder {
		color: white;
	}

	.iconfont {
		font-family: iconfont !important;
		font-size: 28px;
		color: #fff;
	}

	.loginBtn {
		margin: 20px 20px;
	}

	.loginBtn button {
		background-color: #fff;
		color: #65a1f9;
		font-weight: 700;
		border-radius: 8px;
	}

	.login-tips {
		margin: 21px auto;
		text-align: center;
		font-size: 14px;
		color: #333;
	}

	.login-tips text {
		color: #fff;
	}

	.login_item .forget-pwd {
		position: absolute;
		right: 10px;
		width: 74px;
		background: #fff;
		height: 32px;
		color: #65a1f9;
		font-size: 12px;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.yanz_img {
		position: absolute;
		right: 0;
	}

	.yanz_img img {
		display: block;
		position: relative;
		width: 140px;
		height: 45px;
	}

	.popup_content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		justify-items: center;
		align-items: center;
		width: 100%;
		height: 40px;
		background-color: aliceblue;
		padding: 10px 10px;
	}

	.popup_content input {
		background-color: #eee;
		height: 20px;
		width: 50%;
	}

	.popup_content .login_yzmBtn {
		padding: 0 5px;
		height: 25px;
		background: #2c7fd9;
		border-radius: 12px;
		position: absolute;
		right: 0px;
		font-size: 13px;
		font-weight: 400;
		color: #fff;
		line-height: 21px;
	}
</style>